import React, { Component } from "react";
import "./index.scss";
import { connect } from "react-redux";
import sucessPayIco from "@images/imageXHF/sucess-pay-ico.png";
import arrowRight from "@images/imageXHF/arrow-right.png";
import { InterfaceG } from "@config/Config";
import yhTools from "@tools/yh";
import { Toast, Modal } from "antd-mobile";
import MainLayout from "@component/mainLayout/mainLayout";
import XFButton from "@/xfCompontent/xfButton/xfButton";

const alert = Modal.alert;

export class openPayResults extends Component {
	constructor(props) {
		super(props);
		this.state = {
			cardDataList: [],
			credit: {},
			payment: {},
			bill: {}
		};
	}

	componentDidMount() {
		this.getDetialData();
	}
	checkPaypassword = () => {
		let objs = {
			url: InterfaceG.xhbgetPassword,
			params: {},
			_alertShow: false
		};
		yhTools.request(objs).then(res => {
			if (res.code !== "0") {
				alert("设置交易密码", "您尚未设置交易密码，是否设置？", [
					{
						text: "取消",
						onPress: () => console.log("cancel")
					},
					{
						text: "设置",
						onPress: () => {
							this.props.history.push({
								pathname: "/settransactionpassword",
								query: { name: "wallet" }
							});
						}
					}
				]);
			}
		});
	};
	componentWillUnmount() {}
	getDetialData = () => {
		let objs = {
			url: InterfaceG.xhfPaymentSuccessful,
			params: {},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				let listData = [];
				if (res.data.couponList && res.data.couponList.length > 0) {
					listData = res.data.couponList;
				}
				this.setState({
					credit: res.data.credit || {},
					payment: res.data.payment || {},
					bill: res.data.bill || {},
					cardDataList: listData
				});
				this.checkPaypassword();
			} else {
				Toast.info(res.message, 2);
			}
		});
	};
	btnFn = () => {
		yhTools.noticePaySuccess("支付成功");
	};
	handleBack = () => {
		yhTools.noticePaySuccess("支付成功");
	};
	render() {
		let _pageParams = {
			header: {
				title: "开通支付结果"
			},
			isModal: true,
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		const btnStyle = {
			height: "0.80rem",
			width: "6.96rem",
			borderRadius: ".40rem",
			marginTop: ".3rem"
		};
		const { cardDataList, credit, payment, bill } = this.state;
		return (
			<MainLayout pageParams={_pageParams} handleBack={this.handleBack}>
				<div className="open-pay-results">
					<div className="results-title">
						<img src={sucessPayIco} />
						<span>开通并支付成功</span>
					</div>
					<div className="tow-content">
						<div className="content payment-content">
							<p>小辉付本次为您支付</p>
							<span>¥ {payment.realPayAmount || 0.0}</span>
							<i>
								{payment.billDay} {payment.rtnDay}
							</i>
						</div>
						<div
							className="content available-content"
							onClick={() =>
								this.props.history.push({
									pathname: "/xhfHomeCredit",
									query: { name: "/612/openPayResults" }
								})
							}
						>
							<p>
								小辉付可用额度 <img src={arrowRight} />{" "}
							</p>
							<span>¥ {credit.availableAmt || "0.00"}</span>
							<i>总额度 ¥ {credit.creditAmt || "0.00"}</i>
						</div>
					</div>
					<div className="results-detail">
						<div className="box-bg">
							<ul>
								<li>
									<span>应付金额</span>
									<i>¥ {bill.amountPayable || "0.00"}</i>
								</li>
								<li>
									<span>优惠金额</span>
									<i className="red">
										{" "}
										{bill.discountAmount
											? `-¥ ${bill.discountAmount}`
											: "¥ 0.00"}
									</i>
								</li>
								<li>
									<span>消费门店</span>
									<i>{bill.storeName}</i>
								</li>
								<li>
									<span>支付方式</span>
									<i>{bill.paymentInstrument}</i>
								</li>
							</ul>
						</div>
					</div>
					<XFButton
						btText="查看支付详情"
						handleBtn={this.btnFn}
						btnStyle={btnStyle}
					/>
					<p className="coupun-title">
						您的权益已到账
						<em
							onClick={() => {
								this.props.history.push("/paymentDiscount/coupon");
							}}
						>
							查看更多 &gt;&gt;
						</em>
					</p>
					<div className="coupun-content">
						{cardDataList.map((item, key) => {
							return (
								<li className="coupun-item" key={key}>
									<img src={item.couponUrl} />
									<span className="coupun-item-title">
										{item.couponName || ""}
									</span>
									<p className="coupun-item-Price">
										<em style={{ fontSize: "0.26rem" }}>¥</em>
										<em
											style={{
												fontSize: "0.54rem",
												paddingRight: "0.14rem"
											}}
										>
											{item.couponAmount || ""}
										</em>
										{item.couponUseCondition || ""}
									</p>
									<p className="coupun-item-times">{item.couponTerm || ""}</p>
								</li>
							);
						})}
					</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const openPayResultsPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(openPayResults);
export default openPayResultsPage;
